import React, { useEffect, useState } from 'react'
import { Table, Tree, Button, Modal, message } from 'antd'
import {
  DeleteOutlined,
  UnorderedListOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'
import {
  getRolesListApi,
  delRoleApi,
  updateRoleApi
} from '@/api/role'
import {
  getRightListApi
} from '@/api/right'
const { confirm } = Modal

export default function RoleList() {
  // 页面数据源
  const [dataSource, setDataSource] = useState([])
  // table加载loading
  const [listLoading, setListLoading] = useState(false)
  // 数据源提供的权限
  const [rightList, setRightList] = useState([])
  // 页面当前的权限
  const [currentRights, setCurrentRights] = useState([])
  // 当前角色的id
  const [currentId, setCurrentId] = useState(0)
  // 当前行数据
  const [currentRow, setCurrentRow] = useState({})
  // 是否显示树形对话框
  const [isModalVisible, setIsModalVisible] = useState(false)

  // 表格的表头
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '角色名称',
      dataIndex: 'roleName'
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            {/*编辑按钮*/}
            <Button icon={<UnorderedListOutlined/>} onClick={() => {
              setIsModalVisible(true)
              setCurrentId(item.id)
              setCurrentRights(item.rights)
              setCurrentRow(item)
            }} shape="circle" type="primary"/>
            &nbsp;&nbsp;
            <Button danger icon={<DeleteOutlined/>} onClick={() => confirmMethod(item)} shape="circle" />
          </div>
        )
      }
    }
  ]

  useEffect(() => {
    // 获取角色数据源
    getRolesList()
    // 获取权限数据源
    getRightList()
  }, [])

  // 获取角色列表
  const getRolesList = () => {
    setListLoading(true)
    getRolesListApi().then(res => {
      setListLoading(false)
      const list = res
      // 设置数据源，渲染
      setDataSource(list)
    })
  }

  // 获取权限列表
  const getRightList = () => {
    getRightListApi({ '_embed': 'children' }).then(res => {
      const list = res
      setRightList(list)
    })
  }

  // 提交确认
  const handleOk = () => {
    updateRoleApi(currentId, {
      ...currentRow,
      rights: currentRights
    }).then(() => {
      setIsModalVisible(false)
      message.success('操作成功')
      getRolesList()
    })
  }

  // 隐藏树形对话框
  const handleCancel = () => {
    setIsModalVisible(false)
  }

  // 树形组件的渲染的数据源更新
  const onCheck = (checkKeys) => {
    setCurrentRights(checkKeys.checked)
  }

  // 显示删除对话框
  const confirmMethod = (item) => {
    confirm({
      title: '系统提示',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      icon: <ExclamationCircleOutlined/>,
      content: '删除后无法恢复,你确定要删除吗?',
      onOk() {
        delRoleApi(item.id).then(() => {
          message.success('删除成功')
          getRolesList()
        })
      },
      onCancel() {
        // console.log('Cancel');
        console.log('取消删除了')
      }
    })
  }

  return (
    <div>
      <Table
        columns={columns}
        dataSource={dataSource}
        loading={listLoading}
        rowKey={(item) => item.id}
      />

      <Modal
        cancelText={'取消'}
        okText={'确定'}
        onCancel={handleCancel}
        onOk={handleOk}
        open={isModalVisible}
        title="权限分配"
      >
        <Tree
          checkStrictly
          checkable
          checkedKeys={currentRights}
          onCheck={onCheck}
          treeData={rightList}
        />
      </Modal>
    </div>
  )
}
